<template>
	<view class="">
		<view class="" v-for="i in props.replyList">
			<view class="hufitem">
				<view class="flex">
					<image :src="i.avatar" mode="aspectFill" class="logoImage"></image>
					<view class="infoMsg">
						<view class="">{{ i.name }} 回复 {{ i.reply }}</view>
						<!-- <view class="c9">所属地:{{ i.city }}</view> -->
						<view class="c9">修改时间:{{ i.createDate }}</view>
					</view>
				</view>
				<view class="tell">{{ i.content }}</view>
				<view class="tellImg" v-if="i.img">
					<image :src="i.img" mode="aspectFill" @click="bigImg(i.img)"></image>
				</view>
				<view class="hif flex aic" @click="func(i)">
					<van-icon name="chat-o" size="20" class="mgr20" />
					<text>回复</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { showImagePreview } from 'vant';
const props = defineProps({
	replyList: {
		type: Array
	},
	funK: {}
});
const func = (i) => {
	props.funK(i);
};
function bigImg(img) {
	showImagePreview({ images: [img], closeable: true });
}
</script>

<style lang="scss">
.logoImage {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50px;
	border: 1px solid #eee;
	margin-right: 30rpx;
}
.hufitem {
	margin-bottom: 40rpx;
	border-bottom: 1px solid #eee;
	.hif {
		font-size: 26rpx;
		width: 230rpx;
		margin: 30rpx 0;
		text:hover {
			color: red;
		}
	}
	.infoMsg {
		// width: 300rpx;
		view {
			font-size: 24rpx;
			// &:nth-child(1) {
			// 	font-size: 32rpx;
			// }
			&:nth-child(1) {
				margin-bottom: 10rpx;
			}
		}
	}
	.tell {
		width: 600rpx;
		word-wrap: break-word;
		margin-top: 30rpx;
		font-size: 28rpx;
		text-indent: 2rem;
		line-height: 1.8;
	}
	.tellImg {
		width: 200rpx;
		height: 100rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
